<!--
 * @Author: 云风 1558003416@qq.com
 * @Date: 2022-05-16 11:17:32
 * @LastEditors: 云风 1558003416@qq.com
 * @LastEditTime: 2022-05-16 15:43:40
 * @FilePath: \vue3_admin_jinxu\src\views\dynamicchart\components\echartsItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="myChart" class="myChart-item" :id="setOptionObj.otype"></div>
</template>

<script>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import echartsItemDataHook from "@/hook/echartsItemDataHook.js";
export default {
  props: {
    setOptionObj: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    // console.log(props.setOptionObj);
    let myChart = ref(null);
    let myChartbox;
    onMounted(async () => {
      myChartbox = echarts.init(myChart.value);
      // 绘制图表
      myChartbox.setOption(
        echartsItemDataHook(props.setOptionObj, (res, type) => {
          // console.log(res, ">>>>");
          // 向父组件 传递 相应事件
          emit("change", res, type);
        })
      );
      // console.log(window);
      window.onresize = () => {
        // console.log('界面刷新',myChartbox);
        myChartbox.resize();
      };
      // window.onresize = myChartbox.resize();
    });
    const resetWidth = () => {
      myChartbox.resize();
    };
    return {
      myChart,
      resetWidth,
    };
  },
};
</script>

<style scoped>
/* .myChart-item {
  width: ;
} */
</style>
